<template>
  <div>
    <FilterBox v-model="queryParams" @search="search" />
    <pure-table
      :data="tableData"
      :columns="columns"
      stripe
      max-height="calc(100vh - 200px)"
    />
    <div class="filterBox">
      <el-pagination
        v-model:current-page="queryParams.currentPage"
        v-model:page-size="queryParams.pageSize"
        layout=" prev, pager, next, sizes, total"
        :total="20"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import FilterBox from "./components/searchForm.vue";
import { ref } from "vue";
import { columns, tableData } from "./data";

const queryParams = ref({
  name: "",
  dateRange: [],
  currentPage: 1,
  pageSize: 10,
  startTime: "",
  endTime: "",
  startNum: "",
  endNum: ""
});

const search = () => {
  console.log(queryParams.value);
};
const handleSizeChange = (val: number) => {
  console.log(`每页 ${val} 条`);
};

const handleCurrentChange = (val: number) => {
  console.log(`当前页: ${val}`);
};
defineOptions({ name: "resultCheck" });
</script>
